import PropTypes from "prop-types";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { List, Grid, Card, Button, Toast } from "antd-mobile";
import { createAction } from "@common/utils";
import { CommonMask } from "@components";
import { SET_SCAN_DATA } from "@store/global-state/action-types";
import { SAGA_SALE_OUTBOUND_DEL_BARCODE } from "@store/sale-outbound/saga-types";

const BarcodeDetails = (props) => {
  const dispatch = useDispatch();
  const [showMask, setShowMask] = useState(false);
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const scandata = useSelector((state) => state.globalState.scandata);

  const Descriptions = ({ title, record }) => (
    <Card title={title}>
      <Grid columns={2} gap={12}>
        <Grid.Item>条码</Grid.Item>
        <Grid.Item style={{overflowWrap: 'break-word'}}>{record.barcode}</Grid.Item>
        <Grid.Item>包装编码</Grid.Item>
        <Grid.Item>{record.pkgMaterialCode}</Grid.Item>
        <Grid.Item>包装单位</Grid.Item>
        <Grid.Item>{record.pkgUnit}</Grid.Item>
        <Grid.Item>物料编码</Grid.Item>
        <Grid.Item>{record.itemCode}</Grid.Item>
        <Grid.Item>物料名称</Grid.Item>
        <Grid.Item>{record.itemName}</Grid.Item>
        <Grid.Item>物料数量</Grid.Item>
        <Grid.Item>{record.qty}</Grid.Item>
        <Grid.Item>计量单位</Grid.Item>
        <Grid.Item>{record.itemUnit}</Grid.Item>
        <Grid.Item>批次号</Grid.Item>
        <Grid.Item>{record.batchNum}</Grid.Item>
        <Grid.Item>下架库位</Grid.Item>
        <Grid.Item>{record.suName}</Grid.Item>
      </Grid>
    </Card>
  );

  useEffect(() => {
    return () => dispatch(createAction(SET_SCAN_DATA, null));
  }, []);

  useEffect(() => {
    if (scandata && showMask) {
      setShowMask(false);

      let hasBarcodeArr = props.items.filter((i) => i.barcode === scandata);

      if (hasBarcodeArr.length > 0) {
        dispatch(
          createAction(SAGA_SALE_OUTBOUND_DEL_BARCODE, {
            lineId: searchParams.get("lineId"),
            barcode: scandata,
            callback: () => {
              Toast.show({
                icon: "success",
                content: "删除成功",
                maskClickable: false,
              });
            },
          })
        );
      } else {
        Toast.show({
          icon: "fail",
          content: "所扫码条码未找到",
          maskClickable: false,
        });
      }
    }
  }, [scandata]);

  const enableScan = () => {
    if ("cordova" in window) {
      setShowMask(true);
    }
  };

  return (
    <>
      <div style={{ textAlign: "right", backgroundColor: "#F5F5F5" }}>
        <Button
          size="small"
          color="danger"
          onClick={() => enableScan()}
          style={{ margin: "12px" }}
          disabled={props.items?.length === 0}
        >
          扫码删除
        </Button>
      </div>
      <List>
        {props.items.map((i, idx) => (
          <List.Item
            key={idx}
            style={{ backgroundColor: "#F5F5F5" }}
            description={
              <Descriptions
                title={`${idx + 1}/${props.items.length}`}
                record={i}
              />
            }
          />
        ))}
      </List>
      <CommonMask showMask={showMask} txt="请扫码" />
    </>
  );
};

BarcodeDetails.propTypes = {
  items: PropTypes.array,
};

export default BarcodeDetails;
